<template>
  <div class="page-container">
    <div slot="header" class="clearfix">
      <!--工具栏-->
      <div class="toolbar" style="padding-left:15px;">
        <el-form :inline="true" :model="filters">
          <el-row class="search-input">
            <el-form-item label="配送方式：">
              <el-input v-model="filters.deliveryType" placeholder="配送方式"/>
            </el-form-item>
          </el-row>
          <!-- 按钮 -->
          <el-row class="search-button button20">
            <el-form-item>
              <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                type="primary"
                @click="findPage"
              />
            </el-form-item>
            <el-form-item>
              <kt-button
                icon="fa fa-refresh"
                :label="$t('action.reset')"
                type="primary"
                @click="resetForm('filters')"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 列表查询-->
    <el-table
      :data="tableData"
      :size="size"
      :align="align"
      style="width:100%;"
      :default-sort="{prop: 'deliveryCode,status,deliveryType', order: 'descending'}"
      :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
    >
      <el-table-column prop="deliveryCode" label="编码" width="180" sortable></el-table-column>
      <el-table-column prop="status" label="状态" :formatter="formatter" width="180" sortable></el-table-column>
      <el-table-column prop="deliveryType" label="配送方式" width="180" sortable></el-table-column>
      <el-table-column label="操作" align="center" prop="status">
        <template slot-scope="scope">
          <el-switch
            active-color="#2F4554"
            inactive-color="#F56C6C"
            active-value="0"
            inactive-value="1"
            v-model="scope.row.status"
            @change="changeEnabled(scope.row, scope.row.status)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import install from "../../../../http";
export default {
  components: {
    KtButton,
    CyTable,
    TableColumnFilterDialog
  },
  props: {
    size: {
      // 尺寸样式
      type: String,
      default: "mini"
    },
    align: {
      // 文本对齐方式
      type: String,
      default: "left"
    }
  },
  data() {
    return {
      tableData: [],
      filters: {
        deliveryType: null
      },
      totalSize: 0,
      // 分页信息
      pageRequest: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.findPage();
  },
  methods: {
    // 改变状态
    changeEnabled(data, val) {
      console.log(data);
      this.$confirm(
        "此操作将   " + (val == 0 ? "启用" : "停用") + " ，是否继续？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          //修改状态
          this.utils.request.updateOrderDeliveryType(data, function(res) {});
        })
        .catch(() => {
          data.enabled = !data.enabled;
        });
    },
    // 重置
    resetForm(formName) {
      this.filters = {
        deliveryType: null
      };
      this.findPage();
    },
    formatter(row, column) {
      let status = row.status;
      if (status == 0) {
        return "启用";
      } else if (status == 1) {
        return "停用";
      }
    },
    findPage(data) {
      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      if (data != null) {
        this_.pageRequest.pageNum = data.pageNum;
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this.utils.request.queryorderDistributionType(this_.filters, function(
        res
      ) {
        this_.tableData = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    }
  }
};
</script>

<style scoped lang='scss'>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
